<template>
  <!-- 注册页面 -->
  <div style="height: 100%">
    <el-card class="box-card" :body-style="{'line-height':'69px'}">
      <div style="text-align: left;">
        <span style="font-weight: 600; font-size: 28px" @click="toHome">LOGO</span>
        &nbsp;&nbsp;欢迎注册
      </div>
    </el-card>
    <el-card class="box-card" :body-style="{background:'#F2F6FC'}">
      <div style="width: 999px; margin: auto">
        <el-steps :active="active" finish-status="success" :align-center="true">
          <el-step title="验证手机号"></el-step>
          <el-step title="填写账号信息"></el-step>
          <el-step title="注册成功"></el-step>
        </el-steps>
        <br>
        <el-card class="box-card">
          <!-- 验证手机号 -->
          <div v-if="isShow0">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                     class="demo-ruleForm"
                     style="margin: auto; width: 500px;">
              <el-form-item label="手机号" prop="phone" style="width: 400px;">
                <el-input type="text" v-model="ruleForm.phone" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="图形验证码" prop="imgCode" style="width: 400px;">
                <el-input type="text" v-model="ruleForm.imgCode" autocomplete="off" style="width: 188px;"></el-input>
                <el-image style="width: 100px; height: 40px" :src="imgCodeUrl" @click="reloadImgCode"></el-image>
              </el-form-item>
              <el-form-item label="验证码" prop="checkCode" style="width: 400px;">
                <el-input type="text" v-model="ruleForm.checkCode" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getPhoneCode">获取手机验证码</el-button>
              </el-form-item>
            </el-form>
            <br>
            <el-button style="margin-top: 12px;" @click="next('ruleForm')">下一步</el-button>
          </div>

          <!-- 填写账号信息 -->
          <div v-if="isShow1">
            <el-form :model="infoForm" status-icon label-width="100px"
                     class="demo-ruleForm" style="margin: auto; width: 500px;">
              <el-form-item label="用户名/昵称" prop="vipName" style="width: 400px;">
                <el-input type="text" v-model="infoForm.vipName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="生日" prop="birthday" style="width: 400px;">
                <el-date-picker v-model="infoForm.birthday" type="date" placeholder="选择生日"
                                style="width: 300px;"></el-date-picker>
              </el-form-item>
            </el-form>
            <br>
            <el-button style="margin-top: 12px;" @click="back">上一步</el-button>
            <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
          </div>

          <!-- 注册成功 -->
          <div v-if="isShow2">
            <el-result icon="success" title="注册成功" subTitle="请根据提示进行操作">
              <template slot="extra">
                <el-button type="primary" size="medium" @click="goLogin">去登录</el-button>
              </template>
            </el-result>
          </div>
        </el-card>

      </div>
    </el-card>
  </div>
</template>

<script>
  import {get} from "@/api/http";

  export default {
    name: "register",

    // 数据区
    data() {
      return {
        active: 0,
        isShow0: true,
        isShow1: false,
        isShow2: false,

        // 图片验证码
        imgCodeUrl: 'http://localhost:8000/admin/auth/imgCode',

        // 验证手机号表单
        ruleForm: {
          phone: '',
          checkCode: '',
          imgCode: ''
        },
        rules: {
          phone: [
            {required: true, message: '请输入手机号', trigger: 'blur'}
          ],
          checkCode: [
            {required: true, message: '请输入验证码', trigger: 'blur'}
          ],
          imgCode: [
            {required: true, message: '请输入图形验证码', trigger: 'blur'}
          ]
        },

        //
        infoForm: {
          vipName: '',
          birthday: ''
        }

      }
    },

    // 方法区
    methods: {
      // 去登录
      goLogin(){
        this.$router.push('/login');
      },

      //获取手机验证码
      getPhoneCode() {

        // 图片验证码是否填写
        let imgCode = this.ruleForm.imgCode;
        if(imgCode === '' || imgCode === null){
          this.$message({
            message: '请输入图片验证码',
            type: 'error'
          });
          return;
        }

        let param = {'imgCode': this.ruleForm.imgCode, 'phoneNum': this.ruleForm.phone}
        get('/admin/auth/phoneCode', param)
          .then(res => {
            this.$message({
              message: '手机验证码已发送，请查收',
              type: 'success'
            });
          })
          .catch(err => {})
      },

      // 更换验证码
      reloadImgCode() {
        this.imgCodeUrl = 'http://localhost:8000/admin/auth/imgCode?v=' + new Date().getTime();
      },

      // 去首页
      toHome() {
        this.$router.push('/home');
      },

      // 上一步
      back() {
        let i = this.active;
        if (i === 1) {
          this.active--;
          this.isShow0 = true;
          this.isShow1 = false;
          this.isShow2 = false;
        }
      },

      // 下一步
      next(formName) {
        // 控制展示
        let i = this.active;
        if (i === 0) {
          this.$refs[formName].validate((valid) => {
            // 表单验证码
            if (valid) {
              let param = {'phoneCode': this.ruleForm.checkCode, 'phoneNum': this.ruleForm.phone}
              get('/admin/auth/checkPhoneCode', param)
                .then(res => {
                  this.active++;
                  this.isShow0 = false;
                  this.isShow1 = true;
                  this.isShow2 = false;
                })
                .catch(err => {})
            } else {
              return false;
            }
          });
        } else if (i === 1) {
          this.active++;
          this.isShow0 = false;
          this.isShow1 = false;
          this.isShow2 = true;
        }
      }
    }
  }
</script>

<style scoped>

</style>
